/* eslint-disable react/prop-types */
import React, { useEffect } from 'react';
import { navigate } from 'utils/router';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import utils from 'utils';
import { ConfigProvider } from '@teamix/ui';
import { enterPage } from 'utils/track';
import TagForFeature from 'components/tagForFeature';
import SearchHeader from './search_header/index';
import SearchLeft from './search_left';
import SearchRight from './search_right';
import SearchMiddle from './search_middle';
// import ListEmpty from 'atComponents/ListEmpty';
import * as actions from '../action/index';
import './index.scss';

// const { Row, Col } = Grid;

const Search = (props) => {
  const {
    // leftData,
    rowSpanCol: { left, right, middle, middleState, rightOpen },
  } = props;
  useEffect(() => {
    const { pathResource } = window.FORCE;
    const { isProjectOrGroup } = utils.projectOrGroup(pathResource);
    window.TB_NAVIGATION && window.TB_NAVIGATION.setHomePageFlag(false);
    const dataSource = [
      {
        title: !isProjectOrGroup ? (
          <span className="top-nav-temprorary-tag">
            高级搜索
            <TagForFeature
              prefix="yx-"
              type="primary"
              size="small"
              style={{ marginLeft: 4 }}
              tagText="BETA"
            />
          </span>
        ) : (
          '高级搜索'
        ),
      },
    ];

    window.TB_NAVIGATION &&
      window.TB_NAVIGATION.ContextSwitcher.register({
        dataSource,
        onClick() {
          navigate('/search', {
            state: { forceUpdate: true },
          });
        },
      });

    enterPage('Search-Page', {
      sendPerf: false,
    });
  }, []);
  return (
    <ConfigProvider prefix="yx-">
      <div className="codeup_search_containers">
        {props.searchConfettiShow && (
          <img
            className="search_confetti"
            src="https://img.alicdn.com/imgextra/i3/O1CN01z7mDFt23PB24ricX3_!!6000000007247-1-tps-1920-1080.gif"
            alt=""
          />
        )}
        <SearchHeader {...props} />
        <div className="codeup_search_rowcol">
          {!props.dslErrorMessage && (
            <section
              span={left}
              className={`codeup_search_row_containers teamix-layout-content-all-empty ${
                middleState ? 'codeup_search_row_left_con' : ''
              }`}
            >
              <SearchLeft {...props} />
            </section>
          )}
          {middleState && (
            <section span={middle} className="codeup_search_row_containers">
              <SearchMiddle {...props} />
            </section>
          )}
          {(!middleState || rightOpen) && !props.dslErrorMessage && (
            <section span={right} fixedSpan={14} className="codeup_search_row_containers border">
              <SearchRight {...props} />
            </section>
          )}
        </div>
      </div>
    </ConfigProvider>
  );
};

export default connect(
  (state) => state.search.root,
  (dispatch) => bindActionCreators(actions, dispatch),
)(Search);
